<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加图书</title>
    <script type="text/javascript"></script>
    <script src="./js/jquery.js"></script>
    <style type="text/css">
        .title h2 {
            display: inline-block;
        }

        .title button {
            float: right;
            background-color: white;
        }

        .add-picture {
            border: 1px solid black;
        }

        .add-text {
            display: inline-block;
        }

        form {
            display: flex;
            padding: 5px;
        }

        input {
            height: 25px;
        }

        .fourth input {
            width: 340px;
        }

        .fifth input {
            width: 340px;
        }

        .sixth input {
            width: 340px;
        }

        .navbar-form {
            float: right;
        }

        .sixth input {
            height: 100px;
        }
    </style>
</head>

<body>
    <div style="width:360px; margin: 0px auto;">
        <div class="add-picture" style="width: 150px; height: 150px">
            <img id="showImg" src="./" alt="" />
        </div>
        <input type="file" name="file" />

        <form class="first">
            <div class="book_name">
                <span class="book_name">书名</span><br>
                <input type="text" id="add-name" value="" />
            </div>
            &nbsp;
            <div class="author">
                <span class="author">作者</span><br>
                <input type="text" id="add-author" />
            </div>
        </form>
        <form class="second">
            <div class="type">
                <span class="type">类别</span><br>
                <input type="text" id="add-type" />
            </div>
            &nbsp;
            <div class="press">
                <span class="press">出版社</span><br>
                <input type="text" id="add-press" />
            </div>
        </form>
        <form class="third">
            <div class="booknum">
                <span class="booknum">图书总数</span><br>
                <input type="text" id="add-booknum" />
            </div>
            &nbsp;
            <div class="sum">
                <span class="sum">在库总数</span><br>
                <input type="text" id="add-sum" />
            </div>
        </form>
        <form class="fourth">
            <div class="isbn">
                <span class="isbn">ISBN</span><br>
                <input type="text" id="add-isbn" />
            </div>
        </form>
        <form class="fifth">
            <div class="price">
                <span class="price">价格</span><br>
                <input type="text" id="add-price" />
            </div>
        </form>

</body>
<script>
    // 监听input的改变事件, 由于 sm.ms 图床不允许跨域访问，故只能使用后端接口进行转发
    $("input[name=file]").change((event) => {
        // 通过打印自身状态查找file所在地址
        console.log(event);
        // 在控制台中发现target.files[0]是用户选择的文件
        let file = event.target.files[0];
        console.log(file);
        // 判断文件类型为图片, 注意，这里仅判断了type字段的字符串方法
        if (file.type.indexOf("image") != -1) {
            // 发送ajax请求
            // 由于发送的是文件，故请求头的类型必须是 multipart/form-data
            // 且该请求头的参数传递是使用FormData
            // @See https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
            let requestData = new FormData();

            // 此处字段参考Api接口文档，且format有默认值故不是必须传递的
            // @See https://doc.sm.ms/#api-Image-Upload
            requestData.append("smfile", file);
            // requestData.append("format","json")

            $.ajax({
                // 请自行设置后端图片上传接口
                url: "http://192.168.96.193:8033/upload",
                type: "post",
                data: requestData,
                // formdata 自带编码故这里需要设置为false不让ajax自动设置
                contentType: false,
                // 不对 formdata 进行转换， 不加这个有报错
                processData: false,
                success: (res) => {
                    // 观察返回值
                    console.log(res);
                    $("#showImg").attr("src", res.code.url);
                    if (res.code == 200) {
                        // 设置图片显示
                        
                    }
                },
            });
        } else {
            alert("请选择图片文件哦");
            return false;
        }
    });
</script>

</html>